<template>
    <div class="search">
        <div class="search-top">
            <van-search ref="input" @submit.prevent="onSubmit" @keydown.enter="getValue" v-model="value"
                placeholder="请输入搜索关键词" />
            <span @click="getSearch">取消</span>
        </div>
        <div class="search-history">
            <span class="fir">搜索历史</span>
            <span class="sec" @click="deleWhole">
                <van-icon name="delete-o" />全部删除
            </span>
        </div>
        <div class="search-container">
            <p v-for="(item, i) in list" :key="i">{{ item }}
                <van-icon @click="removeValue(i)" class="icon" name="close" />
            </p>
        </div>
        <detailList :timer="timer" :searchList="searchList" :signal="111" />
    </div>
</template>

<script>
import detailList from '../detail/detailList.vue'
import { getSearch } from '../../request/api/home.js'
import timer from '../../utils/derevion.js'
export default {
    name: 'search',
    components: {
        detailList
    },
    data() {
        return {
            value: '',
            list: [],
            searchList: [],
            timer: [],
        }
    },
    methods: {
        getSearch() {
            this.$emit('noSeeSearch', false)
        },
        async getValue() {
            let res = await getSearch(this.value, '0', '5');
            this.searchList = res.data.data;
            if (this.value !== '') {
                this.list.unshift(this.value);
                this.value = '';
            }
            this.timer = res.data.data.map(item => timer(item.time));
        },
        removeValue(i) {
            this.list.splice(i, 1);
            this.searchList = [];
        },
        deleWhole() {
            this.list.splice(0, this.list.length);
            this.searchList = [];
        },
        onSubmit() {
            return false;
        }
    }
}
</script>

<style lang="less" scoped>
.search {
    width: 100%;
    height: 100%;

    .search-top {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .search-history {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;

        .fir,
        .sec {
            margin: 0 20px;
        }
    }

    .search-container {
        width: 100%;
        height: 30px;
        position: relative;

        p {
            line-height: 20px;
            border-bottom: 1px solid #e7e7e7;
            transform: translateY(-10px);
            padding-left: 10px;
        }

        .icon {
            position: absolute;
            left: 320px;
        }
    }

}
</style>